<template>
  <div>
    <h2>售后部客户关系</h2>
    <el-button-group>
          <el-button type="info"  :size='size' @click="refresh">刷新</el-button>
          <el-button :type="typeButton"  :size='size' @click="save">保存</el-button>
    </el-button-group>
  <el-divider></el-divider>
    <el-form :inline="true" label-width="150px" :model="form" ref="form" >
      <el-row>
        <el-col :span="3.5">
          <el-form-item label="预约维修台次:" prop="yuYueWeiXiuTaiCi">
            <el-input-number @change="change" style="width: 200px;" :size="size" v-model="form.yuYueWeiXiuTaiCi" clearable :step-strictly="true"  :min="0" :controls="false"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="3.5">
          <el-form-item label="招揽回厂维修台次:" prop="zhaoLanHuiChangWeiXiuTaiCi">
            <el-input-number @change="change" style="width: 200px;" :size="size" v-model="form.zhaoLanHuiChangWeiXiuTaiCi" clearable :step-strictly="true"  :min="0" :controls="false"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="3.5">
          <el-form-item label="客诉数量:" prop="keSuShuLiang">
            <el-input-number @change="change" style="width: 200px;" :size="size" v-model="form.keSuShuLiang" clearable :step-strictly="true"  :min="0" :controls="false"></el-input-number>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="3.5">
          <el-form-item label="客诉级别:" prop="keSuJiBie">
            <el-select :size="size" v-model="form.keSuJiBie" placeholder="请选择级别" style="width: 200px;"  @change="change" >
              <el-option v-for="item in keSuJiBie" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="3.5">
          <el-form-item label="客诉类别:" prop="keSuLeiBie">
            <el-select :size="size" v-model="form.keSuLeiBie" placeholder="请选择级别" style="width: 200px;"  @change="change">
              <el-option v-for="item in keSuLeiBie" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="3.5">
          <el-form-item label="结案数量:" prop="jieAnShuLiang">
            <el-input-number  @change="change" style="width: 200px;" :size="size" v-model="form.jieAnShuLiang" clearable :step-strictly="true"  :min="0" :controls="false"></el-input-number>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-form-item label="CSI满意度:" prop="cSIManYiDu">
            <el-input  @change="change" style="width: 200px;" :size="size" v-model="form.cSIManYiDu" clearable></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-divider></el-divider>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        typeButton:'info',
        form:{
          yuYueWeiXiuTaiCi:null,//预约维修台次
          haoLanHuiChangWeiXiuTaiCi:null,//招揽回厂维修台次
          keSuShuLiang:null,//客诉数量
          keSuJiBie:'',//客诉级别
          keSuLeiBie:'',//客诉类别
          jieAnShuLiang:null,//结案数量
          cSIManYiDu:null,//CSI满意度
        },
        size:'small',
        keSuJiBie: [{
            label: '一般',
            value: '一般'
          },
          {
            label: '重大',
            value: '重大'
          },
        ],
       keSuLeiBie: [{
            label: '服务',
            value: '服务'
          },
          {
            label: '产品质量',
            value: '产品质量'
          },
          {
            label: '价格',
            value: '价格'
          },
          {
            label: '时效',
            value: '时效'
          },
          {
            label: '欺瞒',
            value: '欺瞒'
          },
          {
            label: '强配',
            value: '强配'
          },
        ],
      }
    },
    methods: {
      change(){
        this.typeButton = 'success'
      },
       save(){
         if(this.typeButton != 'info'){
         this.$ajax.post("SaleKeHuGuanXi2/save", this.form).then(res => {
           var result = res.data;
             if (result.success) {
               this.$notify({
                 title: '提示',
                 message: '数据保存成功',
                 type: 'success',
                 position: 'bottom-right'
               });
               this.refresh()
               this.typeButton = 'info'
             }
         })
         }
       },
       refresh(){
         this.typeButton = "info"
         this.$ajax.post("SaleKeHuGuanXi2/findbydate", {}).then(res => {
           var result = res.data
           this.form = result.data
         })
       },

    },
    created() {
      this.refresh()
    }
  }
</script>

<style>

</style>
